<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-20 19:17:39
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2024-12-21 18:30:12
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\views\dishmana\dishbom\components\editbom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <pb-drawer v-model="showDrawer" :title="`${typeStatue}菜谱计划`" :direction="'btt'" :size="'92%'" :showFoot="false"
    @cancelFn="onCancelFn" @confirmFn="">
    <div class="connect">
      <searchCard :marginBottom="0">
        <el-form :model="recipeForm" label-width="auto" inline ref="recipeFormRef">
          <el-form-item label="菜谱日期：" prop="planDateBegin" style="margin-left: 0;" :rules="[
        {
          required: true,
          message: '请旋转菜谱日期',
          trigger: 'blur',
        }, ]">
            <pb-date-picker type="week" format="YYYY 年第 w 周" v-model="recipeForm.planDateBegin" @change="dateChange"
              :disabled="typeStatue != '新增'" placeholder="请输入菜谱日期"></pb-date-picker>
          </el-form-item>
          <el-form-item label="菜谱名称：" prop="recipePlanName" :rules="[
        {
          required: true,
          message: '请输入菜谱名称',
          trigger: 'blur',
        }, ]">
            <pb-input placeholder="请输入菜谱名称" :disabled="typeStatue != '新增'"
              v-model="recipeForm.recipePlanName"></pb-input>
          </el-form-item>
          <el-form-item label="供餐模式：" :rules="[
        {
          required: true,
          message: '请旋转供餐模式',
          trigger: 'blur',
        }, ]">
            <pb-radio-group :optionList='showMatchList' :disabled="typeStatue != '新增'"
              v-model="recipeForm.useScopeAttributeId  " lable="dishAttributeValue"
              value="dishAttributeValueId"></pb-radio-group>
          </el-form-item>

        </el-form>
        <template #Button>
          <div class="flex">

          </div>

        </template>
      </searchCard>
      <pb-card height="100%" style="padding-top: 0;">
        <div class="flex mb-3">
          <div class="flex tabs">
            <div class="mr-2">总成本: </div>
            <div style="color: var(--pb-color-primary);">{{recipeForm.dishCostTotal}}</div>
            <div>元</div>
          </div>
          <div class="flex tabs">
            <div class="mr-2">预计总金额: </div>
            <div style="color: var(--pb-color-primary);">{{recipeForm.dishSellPriceTotal}}</div>
            <div>元</div>
          </div>
          <div class="flex tabs">
            <div class="mr-2">投产出比: </div>
            <div style="color: var(--pb-color-primary);">{{recipeForm.dishRoiAvg}}</div>
            <div>%</div>
          </div>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
          <el-tab-pane label="周菜谱" name="weeklyRecipe">
            <WeeklyRecipe :dateList="dateList" :recipeDate="recipeDate" @onConfirmModal="onWeeklyRecipe"
              v-loading="loading" ref="WeeklyRecipeRef">
            </WeeklyRecipe>
          </el-tab-pane>
          <el-tab-pane label="菜谱评估" name="assessment">
            <recipeEvaluation ref="recipeEvaluationRef"></recipeEvaluation>
          </el-tab-pane>
        </el-tabs>
      </pb-card>
      <EditMealRecipe ref="EditMealRecipeRef" @onConfirmModal="onWeeklyRecipe"></EditMealRecipe>
      <AddMealRecipe ref="AddMealRecipeRef" @onConfirmModal="onWeeklyRecipe"></AddMealRecipe>
    </div>
  </pb-drawer>
</template>

<script lang="ts" setup>
  import WeeklyRecipe from './weeklyRecipe.vue';
  import EditMealRecipe from './editMealRecipe.vue'
  import { createMsgBox } from "@/Public-UIlibrary/pb-message-box/method.ts"
  import dayjs from 'dayjs';
  import { useRouter } from 'vue-router'
  import { createMessage } from "@/Public-UIlibrary/pb-message/method";
  import recipeEvaluation from './recipeEvaluation.vue'
  import AddMealRecipe from './addMealRecipe.vue'
  import { getRecipePlanDetail, getRecipePlanStatistic, getRecipePlanGenScope, getRecipePlanUpdate, getRecipePlanAssessment, getRecipeDefaultTemplate, getRecipePlanGenName } from '@/api/Recipe';
  const props = defineProps({
    matchList: {
      type: Array,
      default: () => [
      ],
    },
  });
  const router = useRouter()
  const emits = defineEmits(['onRefresh'])
  // 访问界面状态
  const typeStatue = ref()
  const loading = ref(false)
  // 供餐模式数据
  const showMatchList = computed(() => {
    let list = props.matchList.slice(2)
    return list
  })
  // 食谱日期数据
  const dateList = computed(() => {
    let time = recipeForm.value.planDateBegin
    const weekDates = [{}, {}, {}, {}, {}, {}, {}]
    weekDates.forEach((item, i) => {
      item['date'] = dayjs(time).add(i, 'day').format('YYYY-MM-DD'),
        item.week = dayjs(item.date).day()
    });
    return weekDates
  })

  const initialFrom = {
    dishCostTotal: '',
    dishSellPriceTotal: '',
    dishRoiAvg: '',
    recipeTemplateName: '',
    recipePlanName: '',
    planDateBegin: null,
    planDateEnd: null,
    useScopeAttributeId: ''
  }
  const activeName = ref('weeklyRecipe')
  const recipeForm = ref({ ...initialFrom })
  // 编辑食谱弹窗
  const EditMealRecipeRef = ref(null)
  // 新增食谱弹窗
  const AddMealRecipeRef = ref(null)
  // 食谱评估表格
  const recipeEvaluationRef = ref(null)
  // 表单
  const recipeFormRef = ref(null)
  // 菜谱详情表格
  const WeeklyRecipeRef = ref(null)
  // 食谱数据
  const recipeDate = ref([])

  // 食谱评估数据
  const planAssessment = ref([])
  const showDrawer = ref(false)
  const statusList = [{
    lable: ''
  }, {
  }]
  const onShow = (row, type) => {
    typeStatue.value = type
    if (row) {
      recipeForm.value = { ...row }
      getRecipePlanDetailApi(row.id)
      getRecipePlanStatisticApi(row.id)
    }
    showDrawer.value = true
  }
  const onWeeklyRecipe = () => {

    getRecipePlanDetailApi()
  }
  // 取消重置
  const onCancelFn = () => {
    showDrawer.value = false
    recipeForm.value = { ...initialFrom }
    recipeDate.value = []
    WeeklyRecipeRef.value.onReset()
    recipeEvaluationRef.value.onReset()
  }
  // 日期改变
  const dateChange = () => {
    recipeForm.value.planDateBegin = dayjs(recipeForm.value.planDateBegin).format('YYYY-MM-DD')
    recipeForm.value.planDateEnd = dayjs(recipeForm.value.planDateBegin).endOf('week').format('YYYY-MM-DD')
    if (!recipeForm.value.recipePlanName) {


    }
  }
  // 切换tab
  const tabChange = (val) => {
    if (val == 'assessment') {
      recipeEvaluationRef.value.onInIt(recipeForm.value.recipePlanId)
    }
  }

  // 获取食谱接口
  const getRecipePlanDetailApi = async () => {
    loading.value = true
    let res = await getRecipePlanDetail({ recipePlanId: recipeForm.value.recipePlanId })
    loading.value = false
    if (res.code == 2000) {
      recipeDate.value = res.data.weekDataList
      recipeForm.value.useScopeAttributeId = res.data.useScopeAttributeId
    }
  }
  //获取菜品统计数据
  const getRecipePlanStatisticApi = async () => {
    let res = await getRecipePlanStatistic({ recipePlanId: recipeForm.value.recipePlanId })
    if (res.code == 2000) {
      recipeForm.value.dishCostTotal = res.data.dishCostTotal
      recipeForm.value.dishSellPriceTotal = res.data.dishSellPriceTotal
      recipeForm.value.dishRoiAvg = res.data.dishRoiAvg
    }
  }

  // 生成食谱接口
  const getRecipePlanGenApi = async () => {
    loading.value = true
    let { recipePlanName, planDateBegin, planDateEnd, useScopeAttributeId } = recipeForm.value
    let res = await getRecipePlanGen({
      recipePlanName, planDateBegin, planDateEnd, useScopeAttributeId
    })
    if (res.code == 2000) {
      recipeForm.value.recipePlanId = res.data.recipePlanId
      getRecipePlanDetailApi(true)
      getRecipePlanStatisticApi()
      if (res.data.warnList.length) {
        createMsgBox(
          '根据当前食增设定参数，无法满足选菜规则，请确认调整规则或者手动调整菜品',
          { cancelText: '调整参数', confirmText: '手动调整', titleType: 'warning', title: '警告通知', Width: 500, connectList: res.data.warnList, showTitleIcon: true, showIcon: false }).then(res => {
            if (!res) {
              router.push({ path: '/recipeSetting' })
            }
          })
      }
    } else {
      loading.value = false
    }
  }
  defineExpose({ onShow })
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
  .connect {
    height: calc(100% - 76px);
  }

  .connect {
    font-family: DIN, DIN;
  }

  .tabs {
    margin-right: 48px;
  }

  .demo-tabs {
    height: 100%;
  }

  .el-tab-pane {
    height: 100%;
  }
</style>
